<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>{{ map_title }}</title>
    <meta name="robots" content="noindex, follow" />
    <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
    <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key={{ GOOGLE_API_KEY }}" type="text/javascript"></script> 
    <link href="http://www.groundtruthtrekking.org/WildResource/Style/YahooReset.css" rel="stylesheet" type="text/css"/>
    <link href="http://www.groundtruthtrekking.org/WildResource/Style/Text.css" rel="stylesheet" type="text/css" />
    <!--[if !IE]>
    	<link href="http://www.groundtruthtrekking.org/WildResource/Style/NoIETextSize.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <style type="text/css"> 
        html {background-color: rgb(198,224,241);}
        body {overflow: hidden; margin: 10px;}
        body > div {overflow:hidden; width:100%; height:auto; margin:0; padding:0; }
        #StyledMap, #Map {position: relative; width:100%; height:300px;}
        .ULMapCorner, .URMapCorner, .LLMapCorner, .LRMapCorner, .ULFigCorner, .URFigCorner, .LLFigCorner, .LRFigCorner {position: absolute; width: 8px; height: 8px; z-index: 5;}
        .ULMapCorner {top: 0px; left: 0px; background-image: url(http://www.groundtruthtrekking.org/WildResource/Style/Graphics/ULMapCorner.png);}
        .URMapCorner {top: 0px; right: 0px; background-image: url(http://www.groundtruthtrekking.org/WildResource/Style/Graphics/URMapCorner.png);}
        .LLMapCorner {bottom: 0px; left: 0px; background-image: url(http://www.groundtruthtrekking.org/WildResource/Style/Graphics/LLMapCorner.png);}
        .LRMapCorner {bottom: 0px; right: 0px; background-image: url(http://www.groundtruthtrekking.org/WildResource/Style/Graphics/LRMapCorner.png);}
        .ULFigCorner {top: 0px; left: 0px; background-image: url(http://www.groundtruthtrekking.org/WildResource/Style/Graphics/ULFigCorner.png);}
        .URFigCorner {top: 0px; right: 0px; background-image: url(http://www.groundtruthtrekking.org/WildResource/Style/Graphics/URFigCorner.png);}
        .LLFigCorner {bottom: 0px; left: 0px; background-image: url(http://www.groundtruthtrekking.org/WildResource/Style/Graphics/LLFigCorner.png);}
        .LRFigCorner {bottom: 0px; right: 0px; background-image: url(http://www.groundtruthtrekking.org/WildResource/Style/Graphics/LRFigCorner.png);}
    </style>

    <script type="text/javascript">
        var map;
    
        function doSetup()
        {
            var options = {
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                units: "m",
                numZoomLevels: 18,
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                                 20037508.34, 20037508.34)
            };
            
            // The Map
            map = new OpenLayers.Map('Map', options);  // Google projection breaks wms...
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
            //map.addControl( new OpenLayers.Control.PanZoomBar() );

            // Base Layers
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
            var google = new OpenLayers.Layer.Google("Google Hybrid" , {type: G_HYBRID_MAP, 'sphericalMercator': true } );
            var gstreets = new OpenLayers.Layer.Google("Google Streets", {'sphericalMercator': true} );
            var osm = new OpenLayers.Layer.OSM.Mapnik("OpenStreetMap");
            map.addLayers([google, gstreets, osm, wms]);

            // The KML Vector Layer(s)
{% for layer in layer_list %}
	    map.addLayer(new OpenLayers.Layer.GML("{{ layer.title }}", "{{ layer.kml_file.url }}",
                    {
                        projection: map.displayProjection,
                        format: OpenLayers.Format.KML, 
                        formatOptions: {
                          extractStyles: true, 
                          extractAttributes: true
                        }
                    }));
{% endfor %}

	    var center = new OpenLayers.LonLat({{ map_center_lon }}, {{ map_center_lat }});
	    map.setCenter(center.transform(map.displayProjection, map.projection), {{ map_zoom }});
        }
    </script> 
</head> 
<body onload="doSetup()"> 
    <div> 
        <div id="StyledMap">
            <div id="Map"></div>
            <div class="ULMapCorner"></div><div class="URMapCorner"></div><div class="LLMapCorner"></div><div class="LRMapCorner"></div>
        </div>     
        <div class="ULFigCorner"></div><div class="URFigCorner"></div><div class="LLFigCorner"></div><div class="LRFigCorner"></div>
		<img src="http://www.groundtruthtrekking.org/Maps/Keys/CoalOverview.png" style="width: 196px; height: 334px; float: right;" alt="key explaining map" />
		<p>{{ map_caption }}</p>

    </div> 
</body> 
</html> 
